<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% String path=pageContext.getServletContext().getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/eazyui/demo/demo.css">
	<script type="text/javascript" src="<%=path %>/eazyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=path %>/eazyui/jquery.easyui.min.js"></script>
	<style type="text/css">
	a{ color:#999; text-decoration:none;}
		a:hover{ text-decoration:underline;}
	#content{
		width:90%;
		padding:10px;
		margin:0 auto;
	}
	
	
	</style>
	<script type="text/javascript">

	function addUser(){
		var user_id = $("#user_id").val();
		var user_name = $("#user_name").val();
		var role_id = $("#role_id").val();
		var role_name = $("#role_id").find("option:selected").text();
		$.ajax({
			url:"<%=path %>/users/insertUser",
			data:{user_id:user_id,user_name:user_name,role_id:role_id},
			/*dataType:"json",*/
			success:function(data,textStatus){
				if(textStatus=="success"){
					
					if(data==true){
						alert("添加成功");
						
						$('#dg').datagrid('appendRow',{
							user_id:user_id,
							user_name:user_name,
							role_name:role_name,
							
						});
						onLoadSuccess();
						$('#add').window("close");
					}
				}
			},
			error:function(data,textStatus){
				alert("error:"+textStatus);
			},
		})
		
	}
	function deleteUser(user_id,index){
		
		$.ajax({
			url:"<%=path %>/users/deleteUser",
			data:{user_id:user_id},
			/*dataType:"json",*/
			success:function(data,textStatus){
				if(textStatus=="success"){
					
					if(data==true){
						alert("删除成功");
						
						$('#dg').datagrid('deleteRow',index);
						var rows = $('#dg').datagrid("getRows");
						$("#dg").datagrid("loadData",rows);
					}
				}
			},
			error:function(data,textStatus){
				alert("error:"+textStatus);
			},
		})
	}
	function onLoadSuccess(){
		$("a[name='editbtn']").linkbutton({
			plain:true,
		    iconCls: 'icon-edit'
		});
		$("a[name='removebtn']").linkbutton({
			plain:true,
		    iconCls: 'icon-remove'
		});
	}
	function formatterBtn(value,row,index){
		var str = '<a href="#" name="editbtn" class="easyui-linkbutton" title="修改用户信息" onclick="editUser(&quot;'+row.user_id+'&quot;,'+index+');">修改</a> &nbsp;&nbsp;<a href="#" name="removebtn" class="easyui-linkbutton" title="删除用户信息" onclick="deleteUser(&quot;'+row.user_id+'&quot;,'+index+');" >删除</a>';
		return str;
			
	}
	function editUser(user_id,index){
		$("#edit").window("open");
		if(edituser_id!=""){
			$.get("<%=path %>/users/getUserByUserName",{user_id:user_id},function(data,textStatus){
			
						$("#edituser_id").textbox("setValue",data.user_id);
						$("#edituser_name").textbox("setValue",data.user_name);
						$("#editroleId").combobox("setValue",data.role.role_id);						
						$("#editIndex").val(index);
						
					
			})
				
		}
	}
	function saveUser(){
		var user_id = $("#edituser_id").textbox("getValue");
		var user_name = $("#edituser_name").textbox("getValue");
		var role_id = $("#editroleId").combobox("getValue");
		var role_name=$("#editroleId").find("option:selected").text();
		var index =$("#editIndex").val();
		alert(index);
		$.post("<%=path %>/users/editUser",{user_id:user_id,user_name:user_name,role_id:role_id},function(data,textStatus){
			
			
			if(data==true){
				alert("修改成功");
				
				$('#edit').window("close");
				$('#dg').datagrid('updateRow',{
					index:index,
					row:{
						user_id:user_id,
						user_name:user_name,
						role_name:role_name,
					}
			});
			onLoadSuccess();
		}
		
	
	})
	}
	
	</script>
</head>
<body>


<div id="content">
	<table class="easyui-datagrid" style="width:100%;" id="dg" data-options="onLoadSuccess:onLoadSuccess">
	<thead>
		<tr>
			<th field='user_id' style="width:25%;">用户名</th>
			<th field='user_name' style="width:25%;">真实姓名</th>
			<th field='role_name' style="width:25%;">所属角色</th>
			<th field='action' style="width:25%;" data-options="formatter:formatterBtn">操作</th>
		</tr>
	</thead>
	<tbody>
	<c:forEach items="${userList }" var="users">
		<tr>
			<td>${users.user_id }</td>
			<td>${users.user_name }</td>
			<td>${users.role.role_name }</td>
			
		</tr>
	</c:forEach>
	</tbody>
	
</table>
<div style:"padding:20px;">
	<a href="#" class="easyui-linkbutton"  data-options="iconCls:'icon-add'" onclick="$('#add').window('open')">添加用户信息</a>&nbsp;	
	</div>
	<div id="add" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:600px;height:300px;padding:10px;">
				<div style="margin:0 auto;width:60%">
					<div>用户名：</div>
					<input class="easyui-textbox" id="user_id" style="width:100%;height:32px">
				</div>
				<div style="margin:0 auto;width:60%">
				<div>真实姓名：</div>
					<input class="easyui-textbox" id="user_name" style="width:100%;height:32px;">
				</div>
				<div style="margin:0 auto;width:60%">
				<div>所属角色：</div>
					<select class="easyui-combobox" style="width:100%;height:32px;" id="role_id">
						<c:forEach items="${roleList }" var="role">
							<option value="${role.role_id }">${role.role_name }</option>
						</c:forEach>
					</select>
				</div>
				<div style="margin:0 auto;width:60%">
					<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:60%;height:32px;margin:5px auto;" onclick="addUser()" >添加</a>
				</div>
			</div>
			<div id="edit" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:600px;height:300px;padding:10px;">
				<div style="margin:0 auto;width:60%">
					<div>用户名：</div><input id="editIndex" type="hidden">
					<input class="easyui-textbox" id="edituser_id" readonly="readonly" style="width:100%;height:32px">
				</div>
				<div style="margin:0 auto;width:60%">
				<div>真实姓名：</div>
					<input class="easyui-textbox" id="edituser_name" style="width:100%;height:32px;">
				</div>
				<div style="margin:0 auto;width:60%">
				<div>所属角色：</div>
					<select class="easyui-combobox" style="width:100%;height:32px;" id="editroleId">
						<c:forEach items="${roleList }" var="role">
							<option value="${role.role_id }" <c:if test="${role.role_id==role_id }">selected="selected"</c:if> >${role.role_name }</option>
						</c:forEach>
					</select>
				</div>
				<div style="margin:0 auto;width:60%">
					<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:60%;height:32px;margin:5px auto;" onclick="saveUser()" >修改</a>
				</div>
			</div>
			
</div>
</body>
</html>